<template>
	<view class="container">
		<!-- 头部标题 -->
		<view class="page-header">
			<text class="header-title">我发布的家教</text>
			<text class="header-subtitle">管理您发布的家教需求</text>
		</view>

		<!-- 统计信息 -->
		<view class="stats-section">
			<view class="stat-item">
				<text class="stat-number">{{ publishList.length }}</text>
				<text class="stat-label">总发布</text>
			</view>
			<view class="stat-item">
				<text class="stat-number">{{ matchingCount }}</text>
				<text class="stat-label">待匹配</text>
			</view>
			<view class="stat-item">
				<text class="stat-number">{{ matchedCount }}</text>
				<text class="stat-label">已匹配</text>
			</view>
		</view>

		<!-- 发布列表 -->
		<view class="publish-list" v-if="publishList.length > 0">
			<view class="publish-card" v-for="(item, index) in publishList" :key="index">
				<!-- 卡片头部 -->
				<view class="card-header">
					<view class="subject-tag" v-for="(item1,index1) in item.sub">{{ item1 }}</view>
					<view class="status-tag" :class="getStatusClass(item.status)">
						{{ item.status }}
					</view>
				</view>

				<!-- 卡片内容 -->
				<view class="card-content">
					<view class="info-row">
						<text class="info-label">家教区域：</text>
						<text class="info-value">{{ item.regionDistrict }}</text>
					</view>
					<view class="info-row">
						<text class="info-label">小区街道：</text>
						<text class="info-value">{{ item.detailedAddress }}</text>
					</view>
					<view class="info-row">
						<text class="info-label">家教方式：</text>
						<text class="info-value">{{ item.teachingMethod }}</text>
					</view>
					<view class="info-row">
						<text class="info-label">家教薪酬：</text>
						<text class="info-value price">{{ item.salary }}</text>
					</view>
					<view class="info-row">
						<text class="info-label">发布时间：</text>
						<text class="info-value time">{{ formatTime(item.createTime) }}</text>
					</view>
				</view>

				<!-- 数据统计 - 简洁设计 -->
				<view class="stats-bar">
					<view class="stat-item" v-if="item.viewCount">
						<text class="stat-text">浏览量</text>
						<text class="stat-value">{{ item.viewCount }}</text>
					</view>
					<view class="stat-divider" v-if="item.viewCount && item.applyCount"></view>
					<view class="stat-item" v-if="item.applyCount">
						<text class="stat-text">应聘人数</text>
						<text class="stat-value">{{ item.applyCount }}</text>
					</view>
					
				</view>

				<!-- 卡片底部操作 -->
				<view class="card-footer">
					<view class="action-btn edit-btn" @click="editPublish(item)">
						<text class="btn-text">编辑</text>
					</view>
					<view class="action-btn detail-btn" @click="viewDetail(item)">
						<text class="btn-text">查看详情</text>
					</view>
					<view class="action-btn delete-btn" @click="deletePublish(item, index)">
						<text class="btn-text">删除</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 空状态 -->
		<view class="empty-state" v-else>
			<view class="empty-icon">📝</view>
			<text class="empty-text">您还没有发布家教需求</text>
			<text class="empty-hint">发布需求，快速找到合适的老师~</text>
			<view class="empty-action" @click="goToPublish">
				<text class="action-text">发布需求</text>
			</view>
		</view>
	</view>
</template>

<script>
	import * as api from '@/api/family'
	/**
	 * 我发布的家教页面
	 * 展示用户发布的所有家教需求
	 */
	export default {
		name: 'MyPublishPage',
		data() {
			return {
				publishList: []
			}
		},
		computed: {
			// 待匹配数量
			matchingCount() {
				return this.publishList.filter(item => item.status === '1' || item.status === '待匹配').length;
			},
			// 已匹配数量
			matchedCount() {
				return this.publishList.filter(item => item.status === '3' || item.status === '已匹配').length;
			}
		},
		onShow() {
			// 每次显示页面时加载数据
			this.loadPublishList();
		},
		methods: {
			/**
			 * 加载发布列表（Mock数据）
			 */
			loadPublishList() {
				uni.showLoading({
					title: '加载中...'
				});

				api.getMyPublishApi().then(res=>{
					uni.hideLoading()
					let list = res.data
					for(let i = 0;i<list.length;i++){
						if(list[i].status == 0 || list[i].status == 1 ){
							list[i].status = "待匹配"
						}
						if(list[i].status == 2  ){
							list[i].status = "已匹配"
						}
						if(list[i].status == 3  ){
							list[i].status = "已关闭"
						}
						
						if(list[i].teachingMethod == 1 ){
							list[i].teachingMethod = "线下"
						}
						if(list[i].teachingMethod == 2  ){
							list[i].teachingMethod = "线上"
						}
						if(list[i].teachingMethod == 3  ){
							list[i].teachingMethod = "机构授课"
						}
						if(list[i].teachingMethod == 4  ){
							list[i].teachingMethod = "混合模式"
						}
					}
					this.publishList = list
				})
			},

			/**
			 * 格式化时间
			 */
			formatTime(timeStr) {
				if (!timeStr) return '';
				const date = new Date(timeStr);
				const now = new Date();
				const diff = now - date;

				// 小于1分钟
				if (diff < 60000) {
					return '刚刚';
				}
				// 小于1小时
				if (diff < 3600000) {
					return `${Math.floor(diff / 60000)}分钟前`;
				}
				// 小于1天
				if (diff < 86400000) {
					return `${Math.floor(diff / 3600000)}小时前`;
				}
				// 小于7天
				if (diff < 604800000) {
					return `${Math.floor(diff / 86400000)}天前`;
				}
				// 格式化为日期
				return `${date.getMonth() + 1}月${date.getDate()}日`;
			},

			/**
			 * 获取状态样式类名
			 */
			getStatusClass(status) {
				const statusMap = {
					'pending': 'status-pending',
					'待匹配': 'status-pending',
					'matched': 'status-matched',
					'已匹配': 'status-matched',
					'closed': 'status-closed',
					'已关闭': 'status-closed'
				};
				return statusMap[status] || 'status-pending';
			},

			/**
			 * 编辑发布
			 */
			editPublish(item) {
				uni.showToast({
					title: '编辑功能开发中',
					icon: 'none'
				});
			},

			/**
			 * 查看详情
			 */
			viewDetail(item) {
				// 跳转到详情页面
				if (item.id) {
					uni.navigateTo({
						url: `/pages/jiajiao/my-publish-detail?orderId=${item.id}`
					});
				} else {
					uni.showToast({
						title: '订单ID不存在',
						icon: 'none'
					});
				}
			},

			/**
			 * 删除发布
			 */
			deletePublish(item, index) {
				uni.showModal({
					title: '确认删除',
					content: '删除后将无法恢复，确定要删除这条需求吗？',
					success: (res) => {
						if (res.confirm) {
							// Mock模式：从列表中移除（重新加载后会恢复）
							this.publishList.splice(index, 1);

							uni.showToast({
								title: '删除成功',
								icon: 'success',
								duration: 2000
							});

							// 提示：这是mock数据，重新进入会恢复
							setTimeout(() => {
								uni.showToast({
									title: 'Mock数据会在下次加载时恢复',
									icon: 'none',
									duration: 2000
								});
							}, 2500);
						}
					}
				});
			},

			/**
			 * 前往发布页面
			 */
			goToPublish() {
				uni.navigateTo({
					url: '/pages/jiajiao/student_order'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/uni.scss";

	.container {
		min-height: 100vh;
		background: #f8f8f8;
		padding-bottom: 20rpx;
	}

	/* 页面头部 */
	.page-header {
		background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
		padding: 60rpx 30rpx 40rpx;
		color: white;
	}

	.header-title {
		font-size: 44rpx;
		font-weight: bold;
		display: block;
		margin-bottom: 12rpx;
	}

	.header-subtitle {
		font-size: 26rpx;
		opacity: 0.9;
		display: block;
	}

	/* 统计信息 */
	.stats-section {
		display: flex;
		background: white;
		margin: -20rpx 30rpx 20rpx;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
		overflow: hidden;
	}

	.stat-item {
		flex: 1;
		padding: 10rpx 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8rpx;
		position: relative;

		&:not(:last-child)::after {
			content: '';
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
			width: 1rpx;
			height: 60rpx;
			background: #f0f0f0;
		}
	}

	.stat-number {
		font-size: 40rpx;
		font-weight: bold;
		color: #2ecc71;
	}

	.stat-label {
		font-size: 24rpx;
		color: #666;
	}

	/* 发布列表 */
	.publish-list {
		padding: 0 30rpx;
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.publish-card {
		background: white;
		border-radius: 16rpx;
		padding: 24rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
		transition: all 0.3s ease;

		&:active {
			transform: translateY(-2rpx);
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
		}
	}

	/* 卡片头部 */
	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24rpx;
		padding-bottom: 16rpx;
		border-bottom: 2rpx solid rgba(0, 0, 0, 0.05);
		position: relative;
	}

	.subject-tag {
		background: #f8f8f8;
		color: #333;
		padding: 10rpx 20rpx;
		border-radius: 20rpx;
		font-size: 26rpx;
		font-weight: 600;
	}

	.status-tag {
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
		font-weight: 600;

		&.status-pending {
			background: #fffaf5;
			color: #ff8f00;
		}

		&.status-matched {
			background: #f5faf5;
			color: #2ecc71;
		}

		&.status-closed {
			background: #fafafa;
			color: #999;
		}
	}

	/* 卡片内容 */
	.card-content {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
		margin-bottom: 16rpx;
	}

	.info-row {
		display: flex;
		align-items: center;
	}

	.info-label {
		font-size: 26rpx;
		color: #666;
		width: 160rpx;
		flex-shrink: 0;
	}

	.info-value {
		font-size: 26rpx;
		color: #333;
		flex: 1;

		&.price {
			color: #2ecc71;
			font-weight: bold;
		}

		&.time {
			color: #999;
			font-size: 24rpx;
		}
	}

	/* 数据统计 - 简洁设计 */
	.stats-bar {
		display: flex;
		align-items: center;
		gap: 8rpx;
		padding: 12rpx 16rpx;
		background: #fafafa;
		border-radius: 8rpx;
		margin-bottom: 16rpx;
	}

	.stat-item {
		display: flex;
		align-items: center;
		gap: 8rpx;

		&.matched-item {
			.stat-value {
				color: #2ecc71;
			}
		}
	}

	.stat-text {
		font-size: 24rpx;
		color: #999;
	}

	.stat-value {
		font-size: 24rpx;
		color: #333;
		font-weight: 600;
	}

	.stat-divider {
		width: 2rpx;
		height: 24rpx;
		background: #e0e0e0;
		margin: 0 4rpx;
	}

	/* 卡片底部 */
	.card-footer {
		display: flex;
		gap: 12rpx;
		padding-top: 20rpx;
		margin-top: 20rpx;
		border-top: 2rpx dashed rgba(0, 0, 0, 0.08);
	}

	.action-btn {
		flex: 1;
		padding: 18rpx 20rpx;
		border-radius: 12rpx;
		text-align: center;
		transition: all 0.2s ease;

		&:active {
			opacity: 0.8;
		}
	}

	.edit-btn {
		background: #f8f8f8;
		color: #666;

		&:active {
			background: #eeeeee;
		}
	}

	.detail-btn {
		background: #2ecc71;
		color: white;

		&:active {
			background: #27ae60;
		}
	}

	.delete-btn {
		background: #fff8f8;
		color: #f44336;

		&:active {
			background: #ffeeee;
		}
	}

	.btn-text {
		font-size: 26rpx;
		font-weight: 600;
	}

	/* 空状态 */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 120rpx 30rpx;
		text-align: center;
	}

	.empty-icon {
		font-size: 120rpx;
		margin-bottom: 32rpx;
		opacity: 0.5;
	}

	.empty-text {
		font-size: 32rpx;
		color: #333;
		margin-bottom: 12rpx;
		font-weight: 500;
	}

	.empty-hint {
		font-size: 26rpx;
		color: #999;
		margin-bottom: 40rpx;
	}

	.empty-action {
		background: #2ecc71;
		color: white;
		padding: 20rpx 60rpx;
		border-radius: 60rpx;
		box-shadow: 0 4rpx 16rpx rgba(46, 204, 113, 0.3);
	}

	.action-text {
		font-size: 28rpx;
		font-weight: 500;
		color: white;
	}
</style>